<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/lib/vue.global.prod.js"></script>
    <script src="../static/lib/datav.umd.js"></script>
    <script src="../static/lib/echarts.min.js"></script>
    <script src="../static/lib/jquery-3.7.1.min.js"></script>
    <style>
        body {
            margin: 0;
        }

        #app {
            width: 100vw;
            height: 100vh;;
            background: linear-gradient(#081b45, #000000);
        }

        .content {
            width: 100vw;
            height: calc(100vh - 102px);
        }

        .chart {
            width: 100%;
            height: 100%;
        }
    </style>

<body>

<div id="app">
    <div>
        <div style="display: flex;justify-content: center;font-size: 32px;font-weight: bold;color: #ffffff">
            地震数据分析可视化大屏
        </div>
        <div style="display: flex;justify-content: center;">
            <Decoration8 style="width:25vw; height:50px;"></Decoration8>
            <Decoration5 style="width:50vw; height:60px;"></Decoration5>
            <Decoration8 :reverse="true" style="width:25vw; height:50px;"></Decoration8>
        </div>
        <div class="content" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
            <div style="display: flex;flex-direction: row;height: 50%;width: 100%;">
                <div style="flex: 1;display: flex;justify-content: center;align-items: center;">
                    <border-box-12>
                        <div id="boxplot-level" class="chart"></div>
                    </border-box-12>
                </div>
                <div style="flex: 1;display: flex;justify-content: center;align-items: center;">
                    <border-box-12>
                        <div id="bar" class="chart"></div>
                    </border-box-12>
                </div>
                <div style="flex: 1;display: flex;justify-content: center;align-items: center;">
                    <border-box-12>
                        <div id="boxplot-deep" class="chart"></div>
                    </border-box-12>
                </div>
            </div>
            <div style="display: flex;flex-direction: row;height: 50%;width: 100%;">
                <div style="flex: 1;display: flex;justify-content: center;align-items: center;">
                    <border-box-12>
                        <div id="pie-month" class="chart"></div>
                    </border-box-12>
                </div>
                <div style="flex: 1;display: flex;justify-content: center;align-items: center;">
                    <border-box-12>
                        <div id="line" class="chart"></div>
                    </border-box-12>
                </div>
                <div style="flex: 1;display: flex;justify-content: center;align-items: center;">
                    <border-box-12>
                        <div id="pie-level" class="chart"></div>
                    </border-box-12>
                </div>
            </div>

        </div>
    </div>
</div>
<script>
    const {createApp, ref} = Vue
    const {Decoration5, Decoration8, BorderBox12} = DataV
    const App = createApp({
        setup() {
            const title = ref('地震数据分析可视化大屏')
            return {
                title
            }
        },
        mounted() {
            $.get('http://127.0.0.1:5000/boxplot/level').then(res => {
                const myChart = echarts.init(document.getElementById('boxplot-level'))
                const option = {
                    title: [
                        {
                            text: '各月份地震震级箱线图',
                            left: 'center',
                            top: '5%',
                            textStyle: {
                                color: '#ffffff'
                            }
                        }
                    ],
                    dataset: [
                        {
                            // prettier-ignore
                            source: res.value
                        },
                        {
                            transform: {
                                type: 'boxplot',
                                config: {
                                    itemNameFormatter: function (params) {
                                        return `${res.name[params.value]}月`;
                                    }
                                }
                            }
                        },
                        {
                            fromDatasetIndex: 1,
                            fromTransformResult: 1
                        }
                    ],
                    tooltip: {
                        formatter: function (param) {
                            return [
                                '月份: ' + param.name + ' ',
                                'Max: ' + param.data[5],
                                'Q3: ' + param.data[4],
                                'Median: ' + param.data[3],
                                'Q1: ' + param.data[2],
                                'Min: ' + param.data[1]
                            ].join('<br/>');
                        }
                    },
                    grid: {
                        left: '10%',
                        right: '10%',
                        bottom: '15%'
                    },
                    xAxis: {
                        name: '月份',
                        type: 'category',
                        boundaryGap: true,
                        nameGap: 30,
                        splitArea: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#ffffff'
                            }
                        },
                        nameTextStyle: {
                            color: '#ffffff'
                        }
                    },
                    yAxis: {
                        name: '震级(M)',
                        type: 'value',
                        splitArea: {
                            show: true
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#ffffff'
                            }
                        },
                        nameTextStyle: {
                            color: '#ffffff'
                        },
                        min: 2
                    },
                    series: [
                        {
                            name: '月份',
                            type: 'boxplot',
                            datasetIndex: 1,
                            itemStyle:{
                                color:'rgba(255,255,255,0.3)'
                            }
                        }
                    ]
                }
                myChart.setOption(option)
            })
            $.get('http://127.0.0.1:5000/boxplot/deep').then(res => {
                const myChart = echarts.init(document.getElementById('boxplot-deep'))
                const option = {
                    title: [
                        {
                            text: '各月份地震深度箱线图',
                            left: 'center',
                            top: '5%',
                            textStyle: {
                                color: '#ffffff'
                            }
                        }
                    ],
                    dataset: [
                        {
                            // prettier-ignore
                            source: res.value
                        },
                        {
                            transform: {
                                type: 'boxplot',
                                config: {
                                    itemNameFormatter: function (params) {
                                        return `${res.name[params.value]}月`;
                                    }
                                }
                            }
                        },
                        {
                            fromDatasetIndex: 1,
                            fromTransformResult: 1
                        }
                    ],
                    tooltip: {
                        formatter: function (param) {
                            return [
                                '月份: ' + param.name + ' ',
                                'Max: ' + param.data[5],
                                'Q3: ' + param.data[4],
                                'Median: ' + param.data[3],
                                'Q1: ' + param.data[2],
                                'Min: ' + param.data[1]
                            ].join('<br/>');
                        }
                    },
                    grid: {
                        left: '10%',
                        right: '10%',
                        bottom: '15%'
                    },
                    xAxis: {
                        name: '月份',
                        type: 'category',
                        boundaryGap: true,
                        nameGap: 30,
                        splitArea: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#ffffff'
                            }
                        },
                        nameTextStyle: {
                            color: '#ffffff'
                        }
                    },
                    yAxis: {
                        name: '深度(千米)',
                        type: 'value',
                        splitArea: {
                            show: true
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#ffffff'
                            }
                        },
                        nameTextStyle: {
                            color: '#ffffff'
                        }
                    },
                    series: [
                        {
                            name: '月份',
                            type: 'boxplot',
                            datasetIndex: 1,
                            itemStyle:{
                                color:'rgba(255,255,255,0.3)',
                            }
                        }
                    ]
                }
                myChart.setOption(option)
            })
            $.get("http://127.0.0.1:5000/pie/month").then(res => {
                const myChart = echarts.init(document.getElementById('pie-month'))
                const option = {
                    title: {
                        text: '各月份地震数量占比图',
                        left: 'center',
                        top: '5%',
                        textStyle: {
                            color: '#ffffff'
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c} ({d}%)'
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'pie',
                            radius: '50%',
                            data: res.data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            label: {
                                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                backgroundColor: '#F6F8FC',
                                borderColor: '#8C8D8E',
                                borderWidth: 1,
                                borderRadius: 4,
                                rich: {
                                    a: {
                                        color: '#6E7079',
                                        lineHeight: 22,
                                        align: 'center'
                                    },
                                    hr: {
                                        borderColor: '#8C8D8E',
                                        width: '100%',
                                        borderWidth: 1,
                                        height: 0
                                    },
                                    b: {
                                        color: '#4C5058',
                                        fontSize: 14,
                                        fontWeight: 'bold',
                                        lineHeight: 33
                                    },
                                    per: {
                                        color: '#fff',
                                        backgroundColor: '#4C5058',
                                        padding: [3, 4],
                                        borderRadius: 4
                                    }
                                }
                            },
                        }
                    ]
                }
                myChart.setOption(option)
            })
            $.get("http://127.0.0.1:5000/pie/level").then(res => {
                const myChart = echarts.init(document.getElementById('pie-level'))
                const option = {
                    title: {
                        text: '地震震级占比图',
                        left: 'center',
                        top: '5%',
                        textStyle: {
                            color: '#ffffff'
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c} ({d}%)'
                    },
                    series: [
                        {
                            name: '震级',
                            type: 'pie',
                            radius: '50%',
                            data: res.data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            label: {
                                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                backgroundColor: '#F6F8FC',
                                borderColor: '#8C8D8E',
                                borderWidth: 1,
                                borderRadius: 4,
                                rich: {
                                    a: {
                                        color: '#6E7079',
                                        lineHeight: 22,
                                        align: 'center'
                                    },
                                    hr: {
                                        borderColor: '#8C8D8E',
                                        width: '100%',
                                        borderWidth: 1,
                                        height: 0
                                    },
                                    b: {
                                        color: '#4C5058',
                                        fontSize: 14,
                                        fontWeight: 'bold',
                                        lineHeight: 33
                                    },
                                    per: {
                                        color: '#fff',
                                        backgroundColor: '#4C5058',
                                        padding: [3, 4],
                                        borderRadius: 4
                                    }
                                }
                            },
                        }
                    ]
                }
                myChart.setOption(option)
            })
            $.get("http://127.0.0.1:5000/bar").then(res => {
                const myChart = echarts.init(document.getElementById('bar'))
                const option = {
                    title: {
                        text: '地震震级TOP10',
                        left: 'center',
                        top: '5%',
                        textStyle: {
                            color: '#ffffff'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '10%',
                        bottom: '10%',
                        containLabel: true
                    },

                    xAxis: {
                        name: '震级(M)',
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLabel: {
                            textStyle: {
                                color: '#ffffff'
                            }
                        },
                        nameTextStyle: {
                            color: '#ffffff'
                        }
                    },
                    yAxis: {
                        name: '名称',
                        type: 'category',
                        data: res.name.reverse(),
                        axisLabel: {
                            formatter: (value, index) => {
                                return value.split('-')[0]
                            },
                            textStyle: {
                                color: '#ffffff'
                            }
                        },
                        nameTextStyle: {
                            color: '#ffffff'
                        }
                    },
                    series: [
                        {
                            name: '震级(M)',
                            type: 'bar',
                            data: res.value.reverse(),
                            label: {
                                show: true,
                                position: 'inside',
                                formatter: '{b}-震级：{c}'
                            },
                            itemStyle: {
                                color: '#76dbe8',
                                borderRadius: [0, 50, 50, 0]
                            },
                        },
                    ]
                }
                myChart.setOption(option)
            })
            $.get("http://127.0.0.1:5000/line").then(res => {
                const myChart = echarts.init(document.getElementById('line'))
                const option = {
                    title: {
                        text: '各月地震数量折线图',
                        left: 'center',
                        top: '5%',
                        textStyle: {
                            color: '#ffffff'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '10%',
                        bottom: '3%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: '月份: {b0}月<br />个数: {c0}个'
                    },
                    xAxis: {
                        name: '月份',
                        type: 'category',
                        data: res.name,
                        axisLabel: {
                            textStyle: {
                                color: '#ffffff'
                            }
                        },
                        nameTextStyle: {
                            color: '#ffffff'
                        }
                    },
                    yAxis: {
                        name: '个数',
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                color: '#ffffff'
                            }
                        },
                        nameTextStyle: {
                            color: '#ffffff'
                        }
                    },
                    series: [
                        {
                            data: res.value,
                            type: 'line',
                            label: {
                                show: true,
                                position: 'top'
                            },
                        }
                    ]
                }
                myChart.setOption(option)
            })
        }
    })
    App.component('Decoration5', Decoration5)
    App.component('Decoration8', Decoration8)
    App.component('BorderBox12', BorderBox12)
    App.mount('#app')
</script>
</body>
</html>
